<template>

    <el-dialog title="新增企业" :visible="enterprisesAdd" @close="dialogClose" width="60%">

        <el-form :model="ruleForm" :rules="rules" ref="enterpriseAdd" label-width="auto" class="demo-ruleForm">
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="企业名称：" prop="company">
                        <el-input type="text" v-model="ruleForm.company"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="隶属公司ID：" prop="companyId">
                        <el-input type="text" v-model="ruleForm.companyId"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="省份：" prop="provinces">
                        <el-select id="select" v-model="ruleForm.provinces" style="width:100%" clearable @change="show">
                            <el-option label="河北省" value="H"></el-option>
                            <el-option label="北京" value="B"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="省份首字母：" prop="letter">
                        <el-input type="text" v-model="ruleForm.letter" disabled></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="所在城市：" prop="city">
                        <el-cascader v-model="ruleForm.city" :options="options" clearable :append-to-body="false"
                            style="width:100%">
                        </el-cascader>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="详细地址：" prop="address">
                        <el-input type="text" v-model="ruleForm.address"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="企业信用代码：" prop="code">
                        <el-input type="number" v-model="ruleForm.code"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="企业电话：" prop="tel2">
                        <el-input type="number" v-model="ruleForm.tel2"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="企业简介：" prop="introduction">
                        <el-input type="textarea" v-model="ruleForm.introduction"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="备注：" prop="remark">
                        <el-input type="textarea" v-model="ruleForm.remark"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="24">
                <el-col :span="12">
                    <el-form-item label="企业logo：" v-model="ruleForm.logo" prop="logo">
                        <el-upload action="#" list-type="picture-card" :auto-upload="false">
                            <i slot="default" class="el-icon-plus"></i>
                            <div slot="file" slot-scope="{file}">
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                                <span class="el-upload-list__item-actions">
                                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                        <i class="el-icon-zoom-in"></i>
                                    </span>

                                    <span v-if="!disabled" class="el-upload-list__item-delete"
                                        @click="handleRemove(file)">
                                        <i class="el-icon-delete"></i>
                                    </span>
                                </span>
                            </div>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible" width="45%">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="拍卖许可：" v-model="ruleForm.permission" prop="permission">
                        <el-upload action="#" list-type="picture-card" :auto-upload="false">
                            <i slot="default" class="el-icon-plus"></i>
                            <div slot="file" slot-scope="{file}">
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                                <span class="el-upload-list__item-actions">
                                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                        <i class="el-icon-zoom-in"></i>
                                    </span>

                                    <span v-if="!disabled" class="el-upload-list__item-delete"
                                        @click="handleRemove(file)">
                                        <i class="el-icon-delete"></i>
                                    </span>
                                </span>
                            </div>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible" width="45%">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                    </el-form-item>
                </el-col>

            </el-row>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')" class="pull-right margin-l-25">确定
                </el-button>
                <el-button @click="dialogClose" class="pull-right">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

</template>
<script>
export default {
    name: 'enterprisesAdd',
    data () {
        return {
            options: [{
                value: 'shijiazhuang',
                label: '石家庄市',
                children: [{
                    value: 'yuhua',
                    label: '裕华区'
                }, {
                    value: 'qiaoxi',
                    label: '桥西区'
                }
                ]
            }, {
                value: 'handan',
                label: '邯郸市',
                children: [{
                    value: '一区',
                    label: '一区'
                }, {
                    value: '二区',
                    label: '二区'
                }
                ]
            }
            ],
            selects: '',
            indexs: '',
            firstLetter: '',
            ruleForm: {
                company: '',
                companyId: '',
                provinces: '',
                city: '',
                address: '',
                code: '',
                tel2: '',
                introduction: '',
                logo: '',
                permission: ''
            },
            rules: {
                company: [
                    { required: true, message: '请输入企业名称', trigger: 'blur' }
                ],
                companyId: [
                    { required: false, trigger: 'blur' }
                ],
                provinces: [
                    { required: true, message: '请选择省份', trigger: 'change' }
                ],
                city: [
                    { required: true, message: '请选择城市', trigger: 'change' }
                ],
                address: [
                    { required: true, message: '请输入具体地址', trigger: 'blur' }
                ],
                code: [
                    { required: true, message: '请输入企业信用代码', trigger: 'blur' }
                ],
                tel2: [
                    { required: true, message: '请输入企业电话', trigger: 'blur' }
                ],
                introduction: [
                    { required: true, message: '请输入企业简介', trigger: 'blur' }
                ],
                logo: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
                permission: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
            },
        };

    },
    props: {
        enterprisesAdd: {
            type: Boolean
        }
    },
    methods: {

        handleRemove (file) {
            console.log(file);
        },
        handlePictureCardPreview (file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },

        submitForm () {
            this.$refs.enterpriseAdd.validate((valid) => {
                if (valid) {
                    this.$emit('dialogClose');
                }
                else {
                    return;
                }
            });
        },
        show () {
            this.enterpriseAdd.letter = this.enterpriseAdd.provinces;
        },

        // 重置
        // resetForm (formName) {
        //     this.$refs[formName].resetFields();
        // },
        dialogClose () {
            this.$emit('dialogClose');
        }
    },

}
</script>
<style>
.el-scrollbar__wrap {
  overflow: hidden !important;

}

.ql-toolbar.ql-snow+.ql-container.ql-snow {
  height: 200px;
}
</style>
